<template>
	<div class="app-page-tag">
		<div class="app-page-tag__left">
			<a-tabs
				type="editable-card"
				v-model:activeKey="activeKey"
				hide-add
				@edit="handleTabEdit"
				@tabClick="handleTabClick"
			>
				<a-tab-pane
					v-for="(meta, index) of pageMetas"
					:key="meta.fullPath"
					:closable="true"
				>
					<template #tab>
						<span>
							<span>{{ getCaption(meta) }}</span>
						</span>
					</template>
				</a-tab-pane>
			</a-tabs>
		</div>
		<div v-if="pageMetas.length > 0 && showMore" class="app-page-tag__right">
			<a-dropdown-button>
				{{ $t('common.tabpageexp.more') }}
				<template #overlay>
					<a-menu @click="handleClose">
						<a-menu-item key="all" v-if="showCloseAll">{{
							$t('common.tabpageexp.closeall')
						}}</a-menu-item>
						<a-menu-item key="other" v-if="showCloseOther">{{
							$t('common.tabpageexp.closeother')
						}}</a-menu-item>
					</a-menu>
				</template>
			</a-dropdown-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useViewActionStoreWithOut, useAppStoreWithOut } from '@/store';
import { useRoute, useRouter } from 'vue-router';
import { IParam, IProjectSetting, ICustomDialogOptions } from '@/core';

const activeKey = ref('');
const route = useRoute();
const { push } = useRouter();

// 监听路由变化计算激活TAB项
watch(
	() => route.fullPath,
	(newVal) => {
		const { getPageMetas } = useAppStoreWithOut();
		if (getPageMetas && getPageMetas.length > 0) {
			const index = getPageMetas.findIndex((pageMeta: IParam) => {
				return pageMeta.fullPath === newVal;
			});
			if (index !== -1) {
				activeKey.value = newVal;
			}
		}
	},
	{ immediate: true }
);

const projectSetting: IProjectSetting = App.getProjectSetting();

const showMore = projectSetting.multiTabsSetting.showMore;

const showCloseAll = projectSetting.multiTabsSetting.showCloseAll;

const showCloseOther = projectSetting.multiTabsSetting.showCloseOther;

// 获取所有TAB项数据
const pageMetas = computed(() => {
	const { getPageMetas } = useAppStoreWithOut();
	return getPageMetas;
});

// 单个TAB项展示标题
const getCaption = (meta: any = {}): string => {
	const caption = meta.captionLanResTag
		? App.ts(meta.captionLanResTag, meta.caption)
		: meta.caption;
	return meta.info && !Object.is(meta.info, '')
		? `${caption} - ${meta.info}`
		: caption;
};

// 关闭TAB项
const handleClose = (params: IParam) => {
	const { key } = params;
	const { closeAllPage, closeOtherPage } = useAppStoreWithOut();
	if (Object.is(key, 'all')) {
		closeAllPage();
		gotoPage();
	} else {
		closeOtherPage();
	}
};

// 删除TAB项
const handleTabEdit = (
	fullPath: string | number | KeyboardEvent | MouseEvent,
	action: 'add' | 'remove'
) => {
	if (action === 'remove') {
		const { getPageMeta, deletePage } = useAppStoreWithOut();
		const page = getPageMeta(fullPath);
		if (!page) {
			return;
		}
		const { getStateByPath, removeAppViewsByPath } = useViewActionStoreWithOut();
		const state = getStateByPath(page.fullPath);
		if (state) {
            // 处理多标签分页关闭
            const dialogOption: ICustomDialogOptions = App.getViewCloseHint(page.tag);
			App.getDialogHelper().custom({
                ...dialogOption,
                ok: () => {
                    removeAppViewsByPath(page.fullPath);
                    deletePage(fullPath as string);
			        gotoPage();
                },
            });
		} else {
			deletePage(fullPath as string);
			gotoPage();
		}
	}
};

//点击TAB项
const handleTabClick = (
	fullPath: string | number,
	e: KeyboardEvent | MouseEvent
) => {
	push({ path: fullPath as string });
};

//跳转页面
const gotoPage = () => {
	const { historyPathList } = useAppStoreWithOut();
	const length = historyPathList.length;
	if (length > 0) {
		const path = historyPathList[length - 1];
		if (Object.is(path, route.fullPath)) {
			return;
		} else {
			push({ path });
		}
	} else {
		const appConfig = App.getAppConfig();
		let path: string | null = window.sessionStorage.getItem(appConfig.appName);
		if (path) {
			push({ path: path });
		} else {
			push('/');
		}
	}
};
</script>
